<template>
  <div class="search">
    <HyForm
      :form-items="formItems"
      :label-width="labelWidth"
      v-model="formData"
    >
      <!-- 插槽 -->
      <template #header>
        <h1 class="header">员工检索</h1>
      </template>
      <template #footer>
        <div class="handle-btns">
          <el-button @click="handleResetClick()"
            ><el-icon><Filter /></el-icon>重置</el-button
          >
          <el-button type="primary" @click="handleQueryClick()"
            ><el-icon><ZoomOut /></el-icon>搜索</el-button
          >
        </div>
      </template>
    </HyForm>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import HyForm, { IFormItem } from "@/base-ui/form";
export default defineComponent({
  components: {
    HyForm
  },
  emits: ["resetBtnClick", "queryBtnClick"],
  setup(props, { emit }) {
    const formOriginData: any = {};
    // 优化一
    // 重置按钮
    // const handleResetClick = () => {
    //   console.log("执行", formOriginData);
    //   formData = formOriginData;
    // };
    // 搜索按钮
    // let formData = reactive({
    //   name: "",
    //   password: "",
    //   sport: "",
    //   createTime: ""
    // });

    const formItems: IFormItem[] = [
      {
        field: "id",
        type: "input",
        label: "用户名",
        rules: [],
        placeholder: "请输入用户名"
      },
      {
        field: "input",
        type: "input",
        label: "手机号码",
        rules: [],
        placeholder: "请输入手机号码"
      },
      {
        field: "input",
        type: "input",
        label: "用户状态",
        rules: [],
        placeholder: "请输入用户状态"
      },
      // {
      //   field: "sport",
      //   type: "select",
      //   label: "用户状态",
      //   rules: [],
      //   placeholder: "请输入用户状态",
      //   options: [
      //     { title: "在线", value: "在线" },
      //     { title: "禁用", value: "禁用" }
      //     // { title: "排球", value: "basketball" }
      //   ]
      // },
      {
        field: "createTime",
        type: "datepicker",
        label: "创建时间",
        otherOptions: {
          startPlaceholder: "开始时间",
          endPlaceholder: "结束时间",
          type: "daterange"
        }
      }
    ];
    const formData = ref(formOriginData);

    // 2.优化二: 当用户点击重置
    // 重置按钮
    const handleResetClick = () => {
      // for (const key in formOriginData) {
      //   formData.value[`${key}`] = formOriginData[key];
      // }
      formData.value = formOriginData;
      emit("resetBtnClick");
    };
    // 3.优化三: 当用户点击搜索
    const handleQueryClick = () => {
      emit("queryBtnClick", formData.value);
    };
    const labelWidth = "70px";

    return {
      formItems,
      labelWidth,
      formData,
      formOriginData,
      handleResetClick,
      handleQueryClick
    };
  }
});
</script>
<style scoped lang="less">
.search {
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 10px;
  .header {
    text-align: left;
    margin: 0px 0px;
  }
  .handle-btns {
    text-align: end;
  }
}
</style>
